<template>
    <div class="person">
        <h1>情况二：监视ref定义的对象类型</h1>
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>

        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改人物</button>
    
    </div>
</template>



<script lang="ts" setup name="Person">
    // import {ref,reactive} from 'vue'
    import {ref, watch} from 'vue'
    //数据
    let person=ref({name:'李星云',age:19})

    //方法
    function changeName(){
        person.value.name='张三'
    }
    function changeAge(){
        person.value.age+=1
    }
    function changePerson(){
        person.value={name:'蚩梦',age:17}
    }

    //监视

    watch(person,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
    },{deep:true})

</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>